import React, { Component } from "react";
import { Modal, Form, Input, Button, message } from "antd";
const layout = {
  labelCol: {
    span: 8,
  },
  wrapperCol: {
    span: 14,
  },
};
const tailLayout = {
  wrapperCol: {
    offset: 8,
    span: 14,
  },
};
const formRef = React.createRef();

export default class EditForm extends Component {
  state = {
    submitLoading: false,
    isModalVisible: this.props.showdiEtForm,
    formData: this.props.formData,
  };
  handleClose = () => {
    this.props.close();
  };
  static getDerivedStateFromProps(nextProps) {
    if (formRef.current) {
      formRef.current.setFieldsValue(nextProps.formData);
    }
    return {
      isModalVisible: nextProps.show,
      formData: nextProps.formData,
    };
  }
  onFinish = async (values) => {
    this.setState({ submitLoading: true });
    values.id = this.state.formData.machineId ? this.state.formData.id : null;
    values.machineId = this.state.formData.machineId
      ? this.state.formData.machineId
      : this.state.formData;
    values.yield = this.state.formData.values ? this.state.formData.values : 0;
    console.log("Success:", values);
    // return;
    const res = await this.http("MachineSize", values, "POST");
    console.log(res);
    message.success("操作成功！");
    this.setState({ submitLoading: false });
    this.props.refresh();
  };
  onFinishFailed = (errorInfo) => {
    console.log("Failed:", errorInfo);
  };
  render() {
    return (
      <Modal
        title="修改配置"
        footer={[null, null]}
        onCancel={this.handleClose}
        visible={this.state.isModalVisible}
      >
        <Form
          ref={formRef}
          initialValues={this.state.formData}
          {...layout}
          name="basic"
          onFinish={this.onFinish}
          onFinishFailed={this.onFinishFailed}
        >
          <Form.Item
            label="矿机名称"
            name="name"
            rules={[
              {
                required: true,
                message: "矿机名称不可为空！",
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="矿机英文名称"
            name="name_EN"
            rules={[
              {
                required: true,
                message: "矿机英文名称不可为空！",
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="矿机容量(T)"
            name="capacity"
            rules={[
              {
                required: true,
                message: "矿机容量不可为空！",
              },
            ]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="封装时间(日)"
            name="sealTime"
            rules={[
              {
                required: true,
                message: "封装时间不可为空！",
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="可用时间(日)"
            name="vaildTime"
            rules={[
              {
                required: true,
                message: "可用时间不可为空！",
              },
            ]}
          >
            <Input />
          </Form.Item>
          {/* <Form.Item
            label="实时产量(T)"
            name="yield"
            rules={[
              {
                required: true,
                message: "实时产量不可为空！",
              },
            ]}
          >
            <Input />
          </Form.Item> */}
          <Form.Item {...tailLayout}>
            <Button
              loading={this.state.submitLoading}
              type="primary"
              htmlType="submit"
            >
              提交
            </Button>
          </Form.Item>
        </Form>
      </Modal>
    );
  }
}
